<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账号管理</title>
<!--    &lt;!&ndash; Bootstrap table &ndash;&gt;-->
<!--    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>-->
<!--    &lt;!&ndash;bootstrap&ndash;&gt;-->
<!--    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">-->
<!--    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>-->
<!--    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>-->
<!--    &lt;!&ndash;bootstrap-table&ndash;&gt;-->
<!--    <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">-->
<!--    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>-->
<!--    &lt;!&ndash;bootstrap-table-lanuage&ndash;&gt;-->
<!--    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>-->
    <script src="/js/jquery.min.js"></script>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!--    <link href="/css/bootstrap-table.min.css" rel="stylesheet">-->
    <script src="/js/bootstrap.min.js"></script>
    <script src="/dist/bootstrap-table.min.js"></script>
</head>
<script>
    $(function(){
        initTable();
    });
    function initTable(){
        var url = "userlist";
        $('#table').bootstrapTable({
            method:'GET',
            dataType:'json',
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            striped: true,                              //是否显示行间隔色
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            url:url,
            pagination:true,
            //search:true,
            queryParams : function(params){
                var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
                    limit : params.limit, // 每页显示数量
                    offset : params.offset, // SQL语句起始索引
                    page : (params.offset / params.limit) + 1, //当前页码
                };
                return temp;
            },
            //初始化加载第一页，默认第一页
            pageSize: 2,                       //每页的记录行数（*）
            pageList: [2, 4, 6, 8],        //可供选择的每页的行数（*）
            onLoadSuccess:function(){
                $("[name='status']").click(function () {
                    var userId = $(this).attr("userId"),userStatus = $(this).attr("userStatus");
                    jinqiModel(userId,userStatus)
                })
                $("[name='update']").click(function(){
                    var userId = $(this).attr("userId");
                    editModel(userId);
                })
            },
            columns: [
                {
                    field : 'userid',
                    title : 'ID',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                },  {
                    field : 'username',
                    title : '用户名',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                }, {
                    field : 'userimg',
                    title : '头像',
                    align : 'center',
                    valign : 'middle',
                    sortable : true,
                    formatter : function (value, row, index){
                        var  userimg= '<img src=' + value+ ' alt="" height="50px" width="50px"/>';
                        return userimg;
                    },
                }, {
                    formatter:function(value,row,index){
                       console.log(row)
                    },
                    field : "rolename",
                    title : '角色',
                    align : 'center',
                    valign : 'middle',
                    sortable : true,
                    formatter:function(value,row,index){
                        var roles = row.roles;
                        if (roles == undefined || roles.length == 0)
                            return"";
                        var role = "";
                        for (var i in roles){
                            role += roles[i].rolename+",";
                        }
                        return role.substring(0,role.length - 1)
                    },
                }, {
                    field : 'userstatus',
                    title : '状态',
                    formatter:function(value,row,index){
                        if(row.userstatus==0){
                            return "启用";
                        }if (row.userstatus==1){
                            return "禁用";
                        }
                    },
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                },{
                    field : 'usercdate',
                    title : '注册时间',
                    align : 'center',
                    valign : 'middle',
                    sortable : true ,
                }, {
                    title : '操作',
                    align : 'center',
                    valign : 'middle',
                    sortable : true ,
                    formatter : function (value, row, index){
                        var con = '<button type="button" userId="'+row.userid+'" name= "update" class="btn btn-primary">编辑</button >  ';
                        if(row.userstatus==0){
                            con += '<button type="button" name="status" userId="'+row.userid+'" userStatus="'+row.userstatus+'" class="btn btn-danger">禁用</button >';
                        }if (row.userstatus==1){
                            con += '<button type="button" name="status" userId="'+row.userid+'" userStatus="'+row.userstatus+'" class="btn btn-success">启用</button >';
                        }
                        return con;
                    }
                }]
        });
    }
    function editModel(id) {
        //修改
        alert(id);

    }
    //禁用and 启用
    function jinqiModel(id,userstatus) {
        alert(userstatus)
        $.ajax({
            url:"jinAndqi",
            type:"get",
            data:{
                userid:id,
                userstatus:userstatus,
            },
            success:function( a){
                alert(a);
                location="userlisthtml";
            }
        })
    }
        $(function(){

                //获取角色
                $.ajax({
                    url:"rlist",
                    type:"get",
                    success:function( a){
                        console.log(a)
                        for(var i in a){
                            //赋权限
                            $("#r").append("<option value="+a[i].roleid+">"+a[i].rolename+"</option>");
                        }
                    },
                    dataType:"json"
                })
        })
    function add() {
        var roleid=$("#r").val();
        var username=$("#username").val();

        $.ajax({
            url:"add",
            type:"post",
            data:{
                roleId:roleid,
                username:username,
            },
            success:function( a){
                alert(a);
                //location="userlisthtml";
            }
        })
    }
</script>
<body>
<div >
    <button type="button" class="btn btn-primary" style="margin-left: 1110px;margin-top: 5px"  data-toggle="modal" data-target=".bs-example-modal-lg" >新建账号</button >
</div>
<div class="select">

</div>
<div>
    <table id="table"></table>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form  action="/add" method="post" enctype="multipart/form-data">
                    <ul>
                        <li>
                            <label for="">用户名:</label>
                            <input type="text" name="username"  placeholder="请输入用户名" id="username">
                        </li>
                        <li>
                            <label for="">手机号:</label>
                            <input type="text" name="userphone"  placeholder="请输入手机号" id="userphone">
                        </li>
                        <li>
                            <label for="">请确认密码:</label>
                            <input type="password"  name="userpwd" >
                        </li>
                        <li>
                            <label for="">头像</label>
                            <!--                <input type="file" name="userimg"  id="userimg">-->
                            <div id="localImag"><img id="preview" class="img-circle" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
                            <input type="file" name="userimg" id="doc" style="width:150px;" class="btn btn-primary" onchange="javascript:setImagePreview();" >
                        </li>
                        <li>
                            <label for=""></label>
                            <input type="submit" value="保存">
                        </li>
                    </ul>
                </form>
            </div>
    </div>
</div>
</div>
<script>
    function setImagePreview(avalue) {
        var docObj = document.getElementById("doc");
        var imgObjPreview = document.getElementById("preview");
        if(docObj.files && docObj.files[0])
        {
            //火狐下，直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '150px';
            imgObjPreview.style.height = '180px';
            //imgObjPreview.src = docObj.files[0].getAsDataURL();
            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        }
        else
        {
            //IE下，使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag"); //必须设置初始大小
            localImagId.style.width = "150px";
            localImagId.style.height = "180px"; //图片异常的捕捉，防止用户修改后缀来伪造图片
            try {
                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            } catch(e) {
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }
</script>

</body>
</html>